<template>
  <div class="lottery-bg-new">
    <div class="lottery-center">
      <div class="lottery-card-new">
        <div class="lottery-tabs-new">
          <button :class="{active: tab==='lottery'}" @click="tab='lottery'">幸运抽奖</button>
        </div>

        <div class="grid-container">
          <div v-for="(prize, index) in prizes" :key="prize.id" class="grid-item"
               :class="{ active: index === activeIndex }">
            {{ prize.name }}
          </div>
          <div class="grid-item start-button" @click="draw" :class="{ disabled: rolling }">
            {{ rolling ? '抽奖中...' : '开始抽奖' }}
          </div>
        </div>
        <el-alert v-if="msg" :title="msg" type="success" show-icon class="lottery-alert" />
        <div class="lottery-link">
          <el-link type="primary" @click="$emit('to-wins')">查看中奖信息</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { Present } from '@element-plus/icons-vue'

const prizes = [
  { id: 1, name: '奥迪A6' },
  { id: 2, name: '1000元现金' },
  { id: 3, name: '1万元现金' },
  { id: 4, name: 'MacBook Pro' },
  { id: 5, name: 'iPhone 15' },
  { id: 6, name: '100元红包' },
  { id: 7, name: '谢谢参与' },
  { id: 8, name: '谢谢参与' }
]

const msg = ref('')
const rolling = ref(false)
const activeIndex = ref(-1)

const draw = async () => {
  if (rolling.value) return
  msg.value = ''
  rolling.value = true
  activeIndex.value = -1

  let sequence = [0, 1, 2, 4, 7, 6, 5, 3] // Clockwise sequence of prize indices
  let currentSequenceIndex = 0
  let speed = 200
  let spins = 0
  let totalSpins = Math.floor(Math.random() * 3) + 3 // 3-5圈

  const run = () => {
    activeIndex.value = sequence[currentSequenceIndex]
    currentSequenceIndex = (currentSequenceIndex + 1) % sequence.length
    if (spins >= totalSpins && activeIndex.value === finalPrizeIndex) {
      setTimeout(() => {
        rolling.value = false
        msg.value = resultMessage
      }, 500)
    } else {
      if (currentSequenceIndex === 0) spins++
      setTimeout(run, speed)
    }
  }

  let finalPrizeIndex = -1
  let resultMessage = ''

  try {
    const res = await axios.post(`http://localhost:8080/api/lottery/draw`)
    resultMessage = res.data.message
    let prizeName = '谢谢参与'
    if (res.data.success) {
      const match = res.data.message.match(/：(.+)$/)
      if (match) prizeName = match[1]
    }
    const prize = prizes.find(p => p.name === prizeName)
    finalPrizeIndex = prize ? prizes.indexOf(prize) : prizes.findIndex(p => p.name === '谢谢参与')
    if (finalPrizeIndex === -1) { // Failsafe
      finalPrizeIndex = prizes.length - 1
    }
    run()
  } catch (e) {
    rolling.value = false
    msg.value = '抽奖失败'
  }
}
</script>

<style scoped>
.lottery-bg-new {
  min-height: 100vh;
  background: url('../../anheng.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lottery-center {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lottery-card-new {
  background: rgba(40, 42, 48, 0.9);
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  padding: 40px 32px 32px 32px;
  width: 450px;
  max-width: 95vw;
  backdrop-filter: blur(10px);
  border: 1.5px solid #3a3c42;
}

.lottery-tabs-new {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  gap: 12px;
}

.lottery-tabs-new button {
  background: none;
  border: none;
  color: #ddd;
  font-size: 18px;
  padding: 10px 35px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.lottery-tabs-new .active {
  background: linear-gradient(90deg, #c81e2b 0%, #d9534f 100%);
  color: #fff;
  box-shadow: 0 0 20px #d9534f77;
}

.lottery-icons-new {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-bottom: 28px;
  font-size: 30px;
}


.lottery-icons-new .el-icon {
  color: #c81e2b;
  background: #2a2d32;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 4px 12px #000000aa;
  transition: all 0.3s ease;
}

.el-input__wrapper {
  background: #2a2d32 !important;
  border-radius: 10px;
  color: #fff;
  border: 1px solid #444;
}

.el-input__inner {
  color: #fff;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin: 20px 0;
}

.grid-item {
  background: #2a2d32;
  border-radius: 10px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #c0c4cc;
  transition: all 0.2s ease;
}

.grid-item.active {
  background: linear-gradient(90deg, #c81e2b 0%, #d9534f 100%);
  color: #fff;
  transform: scale(1.05);
}

.start-button {
  grid-column: 2;
  grid-row: 2;
  cursor: pointer;
  background: linear-gradient(90deg, #1e88e5 0%, #42a5f5 100%);
  color: #fff;
}

.start-button.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.el-button--primary {
  background: linear-gradient(90deg, #c81e2b 0%, #d9534f 100%);
  border: none;
  font-weight: bold;
  border-radius: 10px;
  padding: 18px 0;
  font-size: 16px;
}

.lottery-alert {
  margin-top: 20px;
}

.lottery-link {
  margin-top: 22px;
  text-align: center;
  color: #c0c4cc;
  font-size: 15px;
}
</style>